<link rel="stylesheet" type="text/css" href="__STATIC__mobile/css/style.css">
<style>
    html,.mui-content{
        height:100%;
    }
    body{
        height:90%;
    }
 .mui-row.mui-fullscreen>[class*="mui-col-"] {
     height: 100%;
 }
 .mui-col-xs-3,
 .mui-control-content {
     overflow-y: auto;
     height: 100%;
 }
 .mui-segmented-control .mui-control-item {
     line-height: 50px;
     width: 100%;
 }
 .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
     background-color: #fff;
 }
 a{
	color:black;
 }
.mui-content{
	padding-bottom:50px;
}
.g-box{
	display:inline-block;
	width:48%;
	border: 1px solid #eee;
}
.oneline{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.huiyuan {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top:11px;
    left: 15px;
    color: #fff;
    background: #e4393c;
    padding: 0 2px;
}
.members_bottom{
    display: none;
}
</style>
<style>
    .goods-search {
        position: absolute;
        width: 90%;
        left:5%;
        top:5px;
        z-index:10;
        background: #ededed;
        display: flex;
        height:30px;
        border-radius:10px;
        padding-left: 8px;
        padding-right: 8px;
        background: #fff;
        box-sizing:border-box;
    }
    .goods-search  input{
        background: #fff;
        opacity: 1;
        width:100%;
        flex:4;
    }
    .goods-search button{
        flex:1;
        text-align: center;
        line-height: 30px;
        height:30px;
    }
    .search-head .search-menu{
        width:100%;
        z-index:5;
        height:40px;
        position: absolute;
        display: block;
    }
    .search-menu img{
        position: relative;
        top:8px;
        left:3%;
        width:24px;
        vertical-align: center;
    }
    .search-head {
        z-index:5;
        position: fixed;
        width:100%;
        left:0;top:0;
    }
    .search-shadow{
        opacity: 0.6;
        z-index:1;
        background: #ededed;
        height:40px;
    }
    .mui-content {
        position: relative;
        top:40px;
        height:100%;
    }
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
    line-height: none;
    width: auto;
    height: auto;
    margin-bottom: 0;
    padding: 0;
    -webkit-user-select: text;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 0px;
    outline: 0;
    background-color: #fff;
    -webkit-appearance: none;
}
.mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    color: #333;
    border: 0 solid #ccc;
    border-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #fff;
    background-clip: padding-box;
}
 
</style>
<div class="search-head">
    <form 
        action="/mobile/goods/lists"
        class="goods-search">
        <input name="goods_name" type="text"/>
        <button type="submit">搜索</button>
    </form>
    <div class="search-shadow"></div>
</div>
        

<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
        <?php $index=1; foreach($datalist as $kk=>$vv){?>
             <a class="mui-control-item <?php echo ($index==1)?'mui-active':'';?>" href="#xx<?php echo $kk; ?>"><?php echo $gtype[$kk]['gtype_name']?$gtype[$kk]['gtype_name']:'未分类'; ?></a>
        <?php $index++; } ?>  
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
    <?php $index=1; foreach($datalist as $kk=>$vv){?>
<div id="xx<?php echo $kk; ?>" class="mui-control-content <?php echo ($index==1)?'mui-active':'';?>">
        <ul class="mui-table-view">
          <?php foreach($vv as $k=>$v){?>
            <li class="g-box por mui-table-view-cell">
                <section>
                    <a href="/mobile/goods/index/?goods_id=<?php echo $v['goods_id'];?>">
                    <img width="100%" src="<?php echo C("UPYUN_DOMAIN").$v['goods_pic'];?>"  onerror="javascript:this.src='__STATIC__mobile/images/goods.jpg';">
                    </a>
<!--                    <span class="huiyuan"><?php echo $v['is_brand']?'非会员商品':'会员商品'; ?></span>-->
                </section>
                <section class="g-flex">
                    <div class="goods-detail oneline">
                        <a href="/mobile/goods/index/?goods_id=<?php echo $v['goods_id'];?>"><?php echo $v['goods_name'];?></a>
                        <p class="listsgoods-group"></p>
                    </div>
                    <p style="font-size:xx-small;">
                           <span class="original_price">¥<?php echo $v['shop_price'];?></span><br>
<!--                        <span style="color:red"> 会员价: <em>¥</em> <?php echo $v['market_price'];?></span>-->
                    </p>
                </section> 
            </li>
        <?php } ?>
        </ul>
      </div>

<?php $index++; } ?> 
      
    </div>
</div>
<include file="Common:nav" />
<script src="__STATIC__mobile/mui/js/mui.min.js"></script>
    